<template>
  <div>
    <h3 class="list-title">
      <div>评论<small>72赞</small></div>
      <bkCountDown />
      <!-- <bkCountDown v-if="bdid" /> -->
    </h3>
    <ul class="list-items">
      <li v-for="(item, index) in list" :key="index">
        <div class="list-avatar">
          <img :src="userImg" alt="" />
        </div>
        <div class="list-content">
          <div class="list-content-title">
            <span>{{ item.name }}</span>
            <span class="likes">400<i class="iconfont icondianzan"></i></span>
          </div>
          <div class="list-content-body">
            {{ item.content }}
          </div>
          <div class="list-content-footer">
            <span class="label">260回复 &gt;</span>
            <span class="time">{{ item.t }}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import userImg from "../../assets/user.jpeg";
import { mapState, mapActions } from "vuex";
import bkCountDown from "../../components/bkCountDown";
export default {
  props: ["bdid"],
  data() {
    return {
      userImg,
    };
  },
  created() {
    this.getList(this.$route.params.id);
    // this.getList(this.bdid);
  },
  methods: {
    ...mapActions("detail", ["getList"]),
  },
  computed: {
    ...mapState("detail", ["list"]),
  },
  components: {
    bkCountDown,
  },
};
</script>

<style scoped>
.list-title {
  margin-top: 50px;
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list-title small {
  color: #999;
  font-size: 14px;
  font-weight: normal;
  margin-left: 10px;
}

.list-title i {
  font-size: 12px;
  font-weight: normal;
  color: #999;
}

.list-avatar {
  margin-right: 15px;
}

.list-avatar img {
  width: 40px;
  display: block;
}

.list-items li {
  display: flex;
  margin-bottom: 30px;
}

.list-content {
  flex-grow: 1;
  font-size: 16px;
}

.list-content-title {
  font-weight: bold;
}

.list-content-body {
  color: #333333;
  margin: 10px 0;
}

.time {
  color: #999;
  font-size: 15px;
  margin-left: 20px;
}

.likes {
  float: right;
  font-weight: normal;
  font-size: 15px;
}

.likes i {
  margin-left: 5px;
}
</style>